/*
 * @Description: 卡已开通模块
 * @Author: yingying.fan
 * @Date: 2019-03-29 10:30:37
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-04-02 18:48:21
 */
<template>
  <div class="card-module-wrapper">
    <!-- 卡图标 -->
    <img
      :src="cardInfo.icon"
      class="card-icon"
    >
    <!-- 卡名称 -->
    <div
      class="card-name"
      @click="goToCardDetail"
    >
      <span>{{cardInfo.name}}</span>
      <i class="iconfont icon-rightangel"></i>
    </div>
    <!-- 一些余额提示 -->
    <div class="baseColorNoAcitve card-balance-hint-wrapper">
      <i
        class="iconfont icon-explain"
        v-show="limitHint"
        @click="goToRechargeDesc"
      ></i>
      <p
        class="balance-weak-prompt"
        v-show="limitHint"
        @click="goToRecharge"
      >{{limitHint}}</p>
    </div>
    <!-- 二维码 -->
    <div
      class="qrcode-wrapper"
      @click="clickQrcode"
    >
      <img
        v-if="showQrCode"
        :src="qrcodeSrc"
      >
      <img
        v-else
        :src="defaultQrImg"
      >
      <p
        v-if="showQrcodeErrorHint"
        class="qrcode-error-hint"
      >二维码获取失败，点击刷新重试</p>
    </div>
    <!-- 提示语 -->
    <p
      v-if="isQrImgDisable"
      class="qrcode-disable-hint"
      @click="goToDesc"
    >
      点击查看
      <font class="baseColorNoAcitve">《{{cardInfo.name}}使用说明》</font>
    </p>
    <p
      v-else
      class="qrcode-hint"
    >乘车码每分钟自动刷新，限当面使用</p>
  </div>
</template>

<script>
import BaseCardModule from './BaseCardModule'
import QrcodeChangzhouMixin from '../../mixins/qrcodemixin/QrcodeChangzhouMixin'
import { open } from '@/utils/JumpUtils.js'
import {
  getInstancePayOrder,
  getWalletAmount
} from '../../api/api.js'
export default {
  name: 'CardOpenModule',
  extends: BaseCardModule,
  mixins: [QrcodeChangzhouMixin],
  props: {
    // 获取失败行程数量失败: 0 未获取 1协议成功 2协议失败
    // getUnpayCountResult: {
    //   type: Number,
    //   default: 0
    // }
  },
  data() {
    return {
      /**
       * 卡配置列表
       */
      configList: [],
      /**
       * 支付方式列表
       */
      paymentName: null,
      paymentDesc: null,
      /**
       * 默认的二维码图片
       */
      defaultQrImg: require('../../assets/noqr.png'),
      /**
       * 不可展示二维码的提示图
       */
      disableQrImg: require('../../assets/disableqr.png'),
      // 二维码是否不可出图
      isQrImgDisable: null, // null代表初始值，true代表不可请码，false代表可请码
      // 下面这部分是通用数据
      limitHint: '',
      qrcodeSrc: '', // 二维码区域图片路径
      hasBindBankCard: false, // 是否绑定银行卡
      isFirstPayBank: false, // 第一个可支持的支付方式是否是银行卡支付
      amount: null, // 钱包余额,为了判断是否通过协议获取,初始值置为null
      getAmountResult: 0, // 获取余额协议的结果，0 未获取 1协议成功 2协议失败
      getQrCodeFuncError: false // 获取二维码的方法失败了
    }
  },
  computed: {
    // 充值说明地址
    lowBalanceDesc() {
      return this.$store.getters.lowBalanceDesc
    },
    getUnpayCountResult() {
      return this.$store.getters.getUnpayCountResult
    },
    // 展示二维码的条件，获取失败行程数量成功并且获取余额成功
    showQrCode() {
      return this.getUnpayCountResult === 1 && (this.getAmountResult === 1 || this.isFirstPayBank) && this.qrcodeSrc
    },
    showQrcodeErrorHint() {
      // 获取失败行程数协议失败 或者 获取余额协议失败 或者 本次获取二维码方法失败了 并且 之前二维码从未获取成功过
      return (this.getUnpayCountResult === 2 || this.getAmountResult === 2 || this.getQrCodeFuncError) && !this.qrcodeSrc
    }
  },
  mounted() {
  },
  methods: {
    // 展示到这张卡的时候获取第一个可用的支付方式，然后获取二维码
    // 获取卡相关的支付顺序,获取到是数据转换后的列表
    async getCardPaymentOrder() {
      let { cardInstanceId, cardType } = this.cardInfo
      // let list = await getInstancePayOrder(cardInstanceId, cardType)
      if (this.paymentName) {
        // 如果当前卡片已经获取过了支付列表，则直接返回支付方式
        return new Promise((resolve, reject) => {
          this.$store.dispatch('fetchPayName', this.paymentName)
          this.$store.dispatch('fetchPayDesc', this.paymentDesc)
          resolve(true)
        })
      } else {
        let list = await getInstancePayOrder(cardInstanceId, cardType)
        // 默认展示第一个可支持的支付方式
        let length = list.length
        if (length === 0) {
          throw new Error('no list')
        } else {
          // this.paymentList = list
          // 返回2个以上支付类型的，代表绑了银行卡
          if (length > 1) {
            this.hasBindBankCard = true
          }
          for (let i = 0; i < length; i++) {
            let item = list[i]
            if (item.isSupport) {
              // 记录支付方式
              this.paymentName = item.payName
              this.$store.dispatch('fetchPayName', this.paymentName)
              if (item.isAccountPay) {
                this.isFirstPayBank = false
                // 账户支付就获取钱包余额
                try {
                  this.amount = await getWalletAmount()
                  this.paymentDesc = '&nbsp;(' + this.amount.toFixed(2) + '元)'
                  this.$store.dispatch('fetchAmount', this.amount)
                  this.$store.dispatch('fetchPayDesc', this.paymentDesc)
                  this.getAmountResult = 1
                  return true
                } catch (error) {
                  this.getAmountResult = 2
                  return false
                }
              } else {
                this.isFirstPayBank = true
                // 是银行卡时将充值提示置空
                this.limitHint = ''
                // 银行卡支付展示卡末尾
                this.paymentDesc = '(' + item.bankCardShortNo + ')'
                this.$store.dispatch('fetchPayDesc', this.paymentDesc)
                return true
              }
            }
          }
        }
      }
    },
    // 获取二维码
    getQrCodeImage() {
      return this.getQrcodeByAmount()
    },
    // 点击二维码刷新
    clickQrcode() {
      // TODO: 需要判断点击的是不是二维码
      // 当二维码可展示时或者获取二维码条件失败时，可点击刷新
      // console.log(111222, this.$parent.$parent)
      if (this.isQrImgDisable === false || this.showQrcodeErrorHint) {
        // this.$parent.$emit('clickQrcode')
        // this.$emit('clickQrcode')
        this.$EventBus.$emit('clickQrcode')
      }
    },
    clearPayment() {
      this.paymentName = null
    },
    // 将二维码数据设置到图片中
    setQrcodeToImage(qrcode) {
      this.qrcodeSrc = qrcode
      this.$EventBus.$emit('forbidPlugin')
    },
    // 跳转到卡详情
    goToCardDetail() {
      localStorage.setItem('CARD_DETAIL_INFO', JSON.stringify(this.cardInfo))
      open('carddetail.html')
    },
    // 跳转到充值说明页
    goToRechargeDesc() {
      if (this.lowBalanceDesc) {
        open(this.lowBalanceDesc)
      }
    },
    // 跳转到卡片说明页
    goToDesc() {
      if (this.cardInfo.descGo) {
        open(this.cardInfo.descGo)
      }
    },
    // 跳转到充值页
    goToRecharge() {
      open('buscard-app/recharge.html')
    }
  }
}
</script>

<style>
.card-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.card-name {
  height: 50px;
  color: #333333;
  margin-top: 20px;
  font-weight: bold;
  font-size: 36px; /*px*/
}
.card-name > * {
  vertical-align: middle;
}
.card-name > i {
  margin-left: 6px;
  font-size: 20px;
}
.card-balance-hint-wrapper {
  height: 70px;
  padding-top: 40px;
  margin: auto;
}
.card-balance-hint-wrapper > * {
  vertical-align: middle;
}
.card-balance-hint-wrapper > i {
  font-size: 36px;
  padding-right: 6px;
}
.balance-weak-prompt {
  display: inline-block;
  height: 42px;
  line-height: 42px;
  padding: 0 38px;
  border-radius: 78px;
  background-color: rgba(55, 149, 255, 0.1);
  font-size: 26px; /*px*/
}
/* 展示二维码的div */
.qrcode-wrapper {
  position: relative;
  height: 400px;
}
.qrcode-wrapper > img {
  width: 400px;
  height: 400px;
}
.qrcode-error-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 35px;
  color: #648df6;
  font-size: 28px; /*px*/
}
.qrcode-hint {
  margin-top: 48px;
  color: #cccccc;
  font-size: 24px; /*px*/
}
.qrcode-disable-hint {
  margin-top: 48px;
  color: #666666;
  font-size: 26px; /*px*/
}
</style>
